<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绑定方式</title>
    <style>
        .item {
            width: 200px;
            height: 200px;
            margin: 0 auto;
            background-color: beige;
        }

        body {
            height: 2000px;
        }
    </style>
</head>

<body>
    <div class="item"></div>
    <script>
        let item = document.querySelector(".item");
        // item.onclick=()=>{
        //     alert(1);
        // }
        let fn1 = () => {
            console.log(1);
        }
        let fn2 = () => {
            console.log(2);
        }
        item.addEventListener("click", fn1);
        item.addEventListener("click", fn2);
        item.removeEventListener("click", fn2);
        item.addEventListener("click", (e) => {
            console.log("屏幕X轴距离：" + e.screenX);
            console.log("屏幕Y轴距离：" + e.screenY);
            console.log("浏览器窗口X轴距离：" + e.clientX);
            console.log("浏览器窗口Y轴距离：" + e.clientY);
            console.log("文档顶部X轴距离：" + e.pageX);
            console.log("文档顶部Y轴距离：" + e.pageY);
            console.log("事件源X轴距离：" + e.offsetX);
            console.log("事件源Y轴距离：" + e.offsetY);
            console.log("事件类型：" + e.type);
        });
        item.onwheel = (e) => {
            console.log("滚动方向：" + e.deltaY);
            //下为正，上为负
        }
        document.onkeydown = (e) => {
            console.log("键盘编号：" + e.keyCode);
        }
    </script>
</body>

</html>